<template>
  <div ref="tipRef" class="tip">
    <h4>资源信息</h4>
  </div>

  <el-divider />

  <div style="margin-bottom: 10px"></div>

  <cv-dialog-form
    v-model:show="add.visible.value"
    title="添加资源信息"
    @confirm="addDataService"
  >
    <cv-form :config="formConfig" :data="formData"> </cv-form>
  </cv-dialog-form>

  <div class="parent_box">
    <el-button v-if="isAdd" type="primary" @click="add.toggle">添加</el-button>

    <span class="parent">{{ menuData?.title }}</span>
  </div>
  <el-table :data="tableData" style="width: 100%; margin-top: 10px">
    <el-table-column label="名称">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="标识">
      <template #default="{ row }">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <span>{{ row.mark }}</span>
          </template>
          <template #reference>
            <div>{{ row.mark }}</div>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="140">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.row, scope.$index)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { Timer } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { FormConfig } from '@/packages/components'
import { $bus } from '@/utils/common/mitt'
import {
  MenuDetailAndButtonPermission,
  ShopAdminPermission,
  ButtonPermissionList,
  AddUpdateShopAdminPermission,
  addShopAdminPermission,
  getMenuDetailAndButtonPermission,
  deleteShopAdminPermission,
} from '@/api/system'
import useVisible from '@/hooks/useVisible'
import { addReq, deleteReq } from '@/utils/http/code'

const add = useVisible()

const isAdd = ref(false)

const addDataService = async (
  data: AddUpdateShopAdminPermission,
  close: Function
) => {
  const res = await addShopAdminPermission(data)

  addReq(res, async () => {
    refreshTable()
    close()
  })
}

const refreshTable = async () => {
  const res = await getMenuDetailAndButtonPermission(
    menuData.value?.id as number
  )
  tableData.value = res.data.buttonPermissionList
}

//表格数据
const tableData = ref<ButtonPermission[]>([])
//菜单数据
const menuData = ref<ShopAdminPermission>()

//接收tree点击
$bus.on('initMenuDetailAndButtonPermission', async (e) => {
  const res = e as MenuDetailAndButtonPermission
  tableData.value = res.buttonPermissionList
  menuData.value = res.shopAdminPermission

  formData.parentId = menuData.value.id

  isAdd.value = false

  if (res.shopAdminPermission.type === 2) {
    isAdd.value = true
  }
})

interface ButtonPermission {
  id: number
  title: string
  mark: string
  sort: number
}

const formData = reactive<AddUpdateShopAdminPermission>({
  type: 3,
  parentId: -1,
  title: '',
  path: '',
  name: '',
  component: '',
  redirect: '',
  level: 4,
  icon: '',
  meta: '',
  state: 1,
  mark: '',
  sort: 1,
  isShow: 1,
})
const formConfig = reactive<FormConfig<ButtonPermission>>({
  items: [
    {
      type: 'input',
      prop: 'title',
      label: '权限名称',
      rules: { required: true },
    },
    {
      type: 'input',
      prop: 'mark',
      label: '资源标识',
      rules: {
        required: true,
      },
    },
    {
      type: 'input-number',
      prop: 'sort',
      label: '排序',
    },
  ],
})

/**
 * 编辑按钮权限
 */
const handleEdit = (index: number, row: ButtonPermission) => {
  //console.log(index, row)
}

/**
 * 删除按钮权限
 */
const tipRef = ref()
const handleDelete = async (row: ButtonPermission, index: number) => {
  ElMessageBox.confirm(`确定移除 ${row.title}?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    appendTo: tipRef.value, //设置组件的根元素,解决全屏不显示问题
  })
    .then(async () => {
      const res = await deleteShopAdminPermission(row.id)
      deleteReq(res, () => {
        refreshTable()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消操作',
      })
    })
}
</script>

<style lang="scss" scoped>
.tip {
  margin-bottom: 10px;
}

.parent_box {
  width: 100%;

  .parent {
    margin-left: 20px;
    font-weight: 700;
    color: brown;
  }
}
</style>
